import { searchTreeOrganization } from '@/services/api/api-cues-submit';
import { getCuesTopicDetails } from '@/services/api/api-county';
import { PageContainer } from '@ant-design/pro-layout';
import { Avatar, Button, Card, Descriptions, Divider, Space, Spin, Tag, Typography } from 'antd';
import { DefaultOptionType } from 'antd/lib/select';
import React, { useEffect, useState } from 'react';
import { useAccess, useModel } from 'umi';
import { DrawerForm, ProCard } from '@ant-design/pro-components';
import TableTopicPlan from '../TableCounty/TableTopicPlan';
import './Details.less'
import moment from 'moment';
interface DetailsActiveProps {
  tableAdoptAccountId?: string | undefined;
  id: string | undefined;
  name: string | undefined;
  onRefurbish: () => void;
  countyKey: string;
  item: CuesTopicData.TopicPage;
  triggerMode: 'card' | 'title';
}

const DetailsTopic: React.FC<DetailsActiveProps> = (props) => {
  const { tableAdoptAccountId, id, name, onRefurbish, countyKey, item, triggerMode } = props;
  const access = useAccess();
  const { initialState, setInitialState } = useModel('@@initialState');

  const [topicDetails, setTopicDetailsState] = useState<CountyData.TopicDetails>();

  /**
   * 获取 详情
   * @param key
   */
  const getTopicDetails = async () => {
    try {
      console.log(countyKey);
      const response = await getCuesTopicDetails({ id, countyKey });
      if (response.code === 0) {
        setTopicDetailsState(response.data);
      }
    } catch (error) { }
  };

  /**
   * 获取 详情
   */
  useEffect(() => {
    getTopicDetails();
  }, []);

  const [articleOrganizations, setArticleOrganizationState] = useState<any[]>([]);

  /**
   * 加载 单位 列表
   * @param key
   */
  const treeOrganizationData = async () => {
    try {
      const response = await searchTreeOrganization();
      if (response.code === 0) {
        setArticleOrganizationState(response.data);
      }
    } catch (error) { }
  };



  const filter = (inputValue: string, path: DefaultOptionType[]) =>
    path.some(
      (option) => (option.label as string).toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
    );

  return (
    <DrawerForm
      key="details_details_drawer_form"
      title={
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <a>{name}</a>
          {topicDetails != undefined && (
            <Tag
              color={
                topicDetails?.run === 1 ? 'green' : topicDetails?.run === 2 ? 'red' : 'orange'
              }
            >
              {topicDetails?.run === 1 ? '进行中' : topicDetails?.run === 2 ? '已结束' : '已暂停'}
            </Tag>
          )}
        </div>
      }
      drawerProps={{
        width:'100%',
        destroyOnClose: true,
      }}
      trigger={
        triggerMode === 'card' ? (
          <div
            style={{
              // paddingLeft: 10,
              // paddingRight: 10,
              paddingBottom: 10,
            }}
          >
            <Card
              bordered={false}
              hoverable
              style={{
                background: 'linear-gradient(#F5FBFF,#fff, #fff)',
              }}
            >
              <Card.Meta
                // avatar={
                //   <Avatar
                //     style={{
                //       marginTop: '2px',
                //     }}
                //     size={'large'}
                //     src={item.createdOrganizationAvatar}
                //   />
                // }

                title={
                  // <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <div >
                    <div
                      style={{
                        whiteSpace: 'nowrap',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        minWidth: 65,
                      }}
                    >
                      {item.createdOrganizationName}
                    </div>
                    <div
                      style={{
                        float: 'left',
                      }}
                    >
                      {/* <Tag color={gradeColor}>{gradeName}</Tag> */}
                      {/* {item.isLinkage === 1 && <Tag color="orange">{linkageTypeName}</Tag>} */}
                      <Tag color={item.run === 1 ? 'green' : item.run === 2 ? 'red' : 'orange'}>
                        {item.run === 1 ? '进行中' : item.run === 2 ? '已结束' : '已暂停'}
                      </Tag>
                      {item.isView === 0 ? (
                        <Tag color="red">未查看</Tag>
                      ) : (
                        <Tag color="orange">已查看</Tag>
                      ) }
                       {item.isSubmit === 0 ? (
                        <Tag color="red">未报送</Tag>
                      ) : (
                        <Tag color="#1AA15F">已报送</Tag>
                      ) }
                    </div>
                  </div>
                }
                description={
                  <>
                    <Typography.Paragraph ellipsis={true}>
                      {
                        <span
                          style={{
                            color: '#888A8C',
                            fontSize: 15,
                          }}
                        >
                          {item.name}
                        </span>
                      }
                    </Typography.Paragraph>
                    <div
                      style={{
                        marginTop: 5,
                        marginRight: 18,
                      }}
                    >
                      <span
                        style={{
                          color:
                            item.run === 1
                              ? '#F47983'
                              : item.run === 2
                                ? '#888A8C'
                                : 'orange',
                        }}
                      >
                        截止：
                        {item?.deadline.slice(0,11)}
                      </span>
                      <span
                        style={{
                          float: 'right',
                        }}
                      >
                        {moment(item.createdTime).fromNow()}
                      </span>
                    </div>
                  </>
                }
              />
            </Card>
            <div
              style={{
                borderRadius: 12,
                background: '#FFF',
              }}
            >
            </div>
          </div>
        ) : (
          <a>{name}</a>
        )
      }
      onVisibleChange={(visible) => {
        if (visible) {
          getTopicDetails();
        } else {
          onRefurbish();
        }
      }}
      submitter={
        false
      }
    >
      <Spin
        style={{
          textAlign: 'center',
        }}
        spinning={topicDetails === undefined}
      >
        <ProCard bordered={false} ghost>
          <Descriptions size="small">
            <Descriptions.Item label="创建时间">{topicDetails?.createdTime}</Descriptions.Item>
            <Descriptions.Item label="截止时间">{topicDetails?.deadline}</Descriptions.Item>
            <Descriptions.Item label="创建单位">
              {topicDetails?.createdOrganizationName}
            </Descriptions.Item>
            <Descriptions.Item label="创建人">{topicDetails?.createdAccountName}</Descriptions.Item>
            <Descriptions.Item label="联系方式">
              {topicDetails?.createdAccountPhone}
            </Descriptions.Item>
          </Descriptions>
          <>
            <Divider />
            <ProCard
              title="指派报送单位"
              ghost
              collapsible
              defaultCollapsed
              onCollapse={(collapse) => console.log(collapse)}
              style={{ lineHeight: 2 }}
            >
              {topicDetails?.assignOrganizations?.map((item) => (
                <Tag>{item.name}</Tag>
              ))}
            </ProCard>
        
            <Divider />
            <Descriptions layout="vertical" size="small">
              <Descriptions.Item label="指派阅读、录用记者" span={4}>
                {topicDetails?.isShare == 1 ? (
                  <Space wrap>
                    {topicDetails?.shareAccounts?.map((item) => (
                      <Tag>{item.name}</Tag>
                    ))}
                  </Space>
                ) : (
                  '自己'
                )}
              </Descriptions.Item>
            </Descriptions>
          </>
        </ProCard>
      </Spin>
      {topicDetails?.plans?.map((item) => {
        return <TableTopicPlan key="table_topic_plan" run={topicDetails?.run} plan={item} length={topicDetails?.plans.length} countyKey={countyKey} />;
      })}
    </DrawerForm>
  );
};

export default DetailsTopic;
